<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <div class="search">
            <div class="search-title">床位：</div>
            <el-row :gutter="20">
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-select
                  v-model="selectForm.politicalStatus"
                  clearable
                  placeholder="楼号"
                  filterable
                  size="medium"
                >
                  <el-option :key="0" label="一号" :value="0"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-select
                  v-model="selectForm.politicalStatus"
                  clearable
                  placeholder="楼层"
                  filterable
                  size="medium"
                >
                  <el-option :key="0" label="一号" :value="0"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="warning-type">床位(7)</div>
    <div class="card-container">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[2]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[2]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[3]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[3]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[2]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[3]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[2]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div slot="header" class="header">
              <!-- <vab-remix-icon icon-class="hotel-bed-fill"></vab-remix-icon> -->
              <vab-icon
                :icon="['fas', iconBed[2]]"
                color="#fff"
                class="header_icon"
              ></vab-icon>
              <span>床上有人</span>
            </div>
            <div style="width: 100%; height: 200px">
              <div class="item">
                床位编号：
                <span>101房01床</span>
              </div>
              <div class="item">
                护理类型：
                <span>介助型</span>
              </div>
              <div class="item">
                老人姓名：
                <span>建书城</span>
              </div>
              <div class="item">
                老人性别：
                <span>男</span>
              </div>
              <div class="item">
                老人年龄：
                <span>78</span>
              </div>
              <div class="item">
                实时心率：
                <span>78</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="warning-type">卫生间(5)</div>
    <div class="card-container-toilet">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', iconToilet[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', iconToilet[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Index",
    components: {},
    data() {
      return {
        pageNo: 1,
        pageSize: 10,
        layout: "total, prev, pager, next, jumper",
        total: 0,
        background: true,
        selectArr: [0, 1, 2, 3, 4, 5, 6],
        iconBed: [
          "bed",
          "procedures",
          "procedures",
          "bell",
          "minus-circle",
          "minus-circle",
        ],
        iconToilet: ["male", "pray", "bell", "male"],
        backgroundColor: [
          "colorType0",
          "colorType1",
          "colorType2",
          "colorType3",
          "colorType4",
          "colorType5",
          "colorType6",
        ],
        formData: {},
        selectForm: {},
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {},
    methods: {
      handleFilter(e) {
        let id = e.currentTarget.dataset.id;
        console.log(id);
        if (this.selectArr.indexOf(parseInt(id)) === -1) {
          this.selectArr.push(parseInt(id));
        }
      },
      handleClose(id) {
        if (this.selectArr.indexOf(parseInt(id)) !== -1) {
          this.selectArr.splice(this.selectArr.indexOf(parseInt(id)), 1);
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        // this.fetchData();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        // this.fetchData();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;
      .search {
        display: flex;
        .search-title {
          flex: 0 0 48px;
          width: 48px;
          line-height: 36px;
          font-size: 16px;
          color: #333;
        }
      }
      .el-tag {
        background: none;
        border: 1px solid #dddfe7;
        color: #333;
        line-height: 34px;
        &.active {
          border: none;
          color: #fff;
          line-height: 36px;
        }
      }
      .el-tag--medium {
        height: 36px;
        cursor: pointer;
        font-size: 14px;
        ::v-deep {
          .el-tag__close {
            color: #fff;
          }
        }
      }
    }
    .warning-type {
      margin-bottom: 13px;
      font-size: 20px;
      color: #1791ff;
      font-weight: 500;
      // <vab-icon :icon="['fas', 'pray']"></vab-icon>
    }
    .card-container {
      margin-bottom: 10px;
      .el-card {
        border-radius: 8px;
        cursor: pointer;
        ::v-deep {
          .el-card__header {
            height: 48px;
            line-height: 48px;
            padding: 0 12px;
            background: #18ba39;
          }
          .el-card__body {
            padding: 12px;
            .item {
              margin-bottom: 10px;
              line-height: 24px;
              font-size: 16px;
              color: #999;
              span {
                width: 50%;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #333;
                font-size: 16px;
                vertical-align: middle;
              }
            }
          }
        }
      }
      .el-card.colorType0 {
        ::v-deep {
          .el-card__header {
            background: #18ba39;
          }
        }
      }
      .el-card.colorType1 {
        ::v-deep {
          .el-card__header {
            background: #e0c720;
          }
        }
      }
      .el-card.colorType2 {
        ::v-deep {
          .el-card__header {
            background: #e5362a;
          }
        }
      }
      .el-card.colorType3 {
        ::v-deep {
          .el-card__header {
            background: #c400d2;
          }
        }
      }
      .el-card.colorType4 {
        ::v-deep {
          .el-card__header {
            background: #666666;
          }
        }
      }
      .el-card.colorType5 {
        ::v-deep {
          .el-card__header {
            background: #999999;
          }
        }
      }
      .header {
        position: relative;
        color: #fff;
        .header_icon {
          position: absolute;
          left: 0px;
          top: 50%;
          font-size: 20px;
          transform: translateY(-50%);
        }
        span {
          display: block;
          text-align: center;
          font-size: 18px;
        }
      }
    }
    .card-container-toilet {
      .el-card {
        border-radius: 4px;
        cursor: pointer;
        ::v-deep {
          .el-card__header {
            height: 48px;
            line-height: 48px;
            padding: 0 12px;
            background: #18ba39;
          }
          .el-card__body {
            padding: 0px;
            .item {
              display: flex;
              padding: 22px 16px;
              span {
                flex: 1;
                line-height: 26px;
                color: #fff;
                font-size: 18px;
                vertical-align: middle;
                &:first-child {
                  flex: 0 0 60px;
                  width: 60px;
                }
              }
              .header_icon {
                margin-right: 12px;
                color: #fff;
                font-size: 24px;
              }
            }
          }
        }
      }
      .el-card.colorType0 {
        ::v-deep {
          .el-card__body {
            background: #e0c720;
          }
        }
      }
      .el-card.colorType1 {
        ::v-deep {
          .el-card__body {
            background: #e5362a;
          }
        }
      }
      .el-card.colorType2 {
        ::v-deep {
          .el-card__body {
            background: #c400d2;
          }
        }
      }
      .el-card.colorType3 {
        ::v-deep {
          .el-card__body {
            background: #18ba39;
          }
        }
      }
    }
  }
</style>
